<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error aliquid, asperiores harum quas mollitia maiores voluptatum sed vero assumenda dolores consequatur voluptatem odit? Officia eligendi repellat tempora temporibus, sunt molestiae.</p >
		<div><h1>你好</h1></div>
		<button id="btn">按钮</button>
		<input type="text" id="output" placeholder="再见" />
		<script>
			/* 		JavaScript：基础语法+* DOM（页面）+BOM(浏览器)
					JQuery操作DOM方式【7方式，36个函数】--改变页面效果
					1.元素内容操作：操作元素和元素内容的方式【3个函数】
					.html()
					.val()
					.text()
					2.元素属性操作：操作元素的属性[固定属性、附加属性]【4个函数】
					.attr()
					.removeattr()
					.prop()
					.removeProp()
					3.元素类名操作：【4个函数】
					hasclass()
					4.元素样式【位置】操作：【5个函数】
					css() width() height()
					outerwidth() outerheight()
					5.元素删除和插入操作：【7个函数】
					append() prepend() after() 
					before() remove() empty() 
					 replacewith()
					6.元素遍历操作：【6个函数】
					children()   parent()   
					siblings() next()    
                    prev() each()
					7.动画操作：【7个函数】
					show() hide()  
					slideDown()  slideUp() 
					   fadeIn()   fadeOut()     
					hover()
					
					大作业：tab选项卡
					BOM浏览器对象模型：学习7个对象
			 */
			

			/* JQuery操作DOM：通过点击一个元素绑定一个事件给另一个元素改变效果
			 .html()函数  ： 增加一个元素，覆盖原来的html
			 .val函数	 ：与input元素使用，改变修改表单元素中文本
			 */
			/* $('button').click(function(){
				// DOM操作---改变页面其他元素
				// DOM操作--改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯........</marquee>");
			}); */
			/* 练习：100*100框，div 鼠标移动上去，文本改成超链接 
					按钮和输入框，点击按钮，输入框输出文本效果
					
			*/
			$('div').mouseenter(function(){
				$('h1').html("你好");
			});
			
			$('#btn').click(function(){
				$("#output").val("再见");
			});
		</script>
	</body>
</html>